<template>
<div>
	<c-head :nav="nav"></c-head>
	<div class="wrap-width">
		<div class="api clearfix">
			<div class="fl api-border">
				<div class="api-img">
					<div class="api-black"></div>
				</div>
			</div>
			<div class="fl api-con">
				<span class="api-name">营养人群食谱</span>
				<p>针对不同人群的营养需求建立的分类食谱</p>
				<a @click="code">申请接口，请点击获取客服微信二维码</a>
			</div>
		</div>
		<!-- 相关推荐start -->
		<div class="correlation">
			<div class="center-title">
				<h2>相关推荐</h2>
				<span></span>
			</div>
			<!-- pc端 -->
			<div class="corr-content slider-container" :class = 'basicdata.containerClass'>
				<span class="pre icon-left" @click="pre" @mouseover="stop" @mouseout="begin"></span>
				<div class="cor-lists">
					<div class="slider-wrapper"
		            :style="styleobj"
		            :class="basicdata.animation"
		            @mouseover="stop"
		            @mouseout="begin"
		             id="slider">
		            	<template  v-if="sliderinit.loop">
							<div class="cor-list">
								<div v-for="item in pages[pages.length-1]">
									<img :src="item.img">
									<span v-html="item.name"></span>
								</div>
							</div>
							<template>
								<div class="cor-list" v-for="list in pages">
									<div  v-for="item in list">
										<img :src="item.img">
										<span v-html="item.name"></span>
									</div>
								</div>
							</template>
							<div class="cor-list">
								<div v-for="item in pages[0]">
									<img :src="item.img">
									<span v-html="item.name"></span>
								</div>
							</div>
						</template>
					</div>
				</div>
				
				<span class="next icon-right" @click="next" @mouseover="stop" @mouseout="begin"></span>
			</div>
			<!-- 移动端 -->
			<div class="m-content" ref="mlists">
				<ul class="m-lists clearfix">
					<li class="m-list" v-for="item in list">
						<img :src="item.img">
						<span v-html="item.name">应季食谱</span>
					</li>
				</ul>
			</div>
		</div>
		<!-- 相关推荐end -->
		<!-- api数据start -->
		<div class="api-detail">
			<div class="center-title">
				<h2>API数据</h2>
				<span></span>
			</div>
			<div class="api-content">
				<p>营养人群食谱&nbsp;|&nbsp;接口地址：</p>
				<p>支持格式：JSON</p>
				<p>请求方式：get</p>
				<p>请求实例：http://sp.qiezilife.com/api/developer/authirization?appid={APPID}&appsecret={APPSECRET}</p>
				<p>接口备注：营养人群食谱列表</p>
				<p>请求参数说明：</p>
			</div>
		</div>
		<!-- api数据end -->
	</div>
	<div class="fade" v-show = 'showCode'>
		<div class="code-wrap">
			<img src="../assets/img/code.jpg">
			<span class="icon-close1 close" @click="close"></span>
		</div>
	</div>
	<foot></foot>
</div>
</template>
<script>
    import head from '@/components/head'
    import foot from '@/components/footer'
    import BScroll from 'better-scroll'
    export default {
        data(){
            return {
                nav: 1,
                showCode: false,
                basicdata: {
                    poswidth: '0',
                    posheight: '0',
                    start: {},
                    end: {},
                    tracking: false,
                    animation: {
                        'animation-ease': false
                    },
                    containerClass: {
                        'swiper-container-vertical': false
                    },
                    setIntervalid: ''
                },
                sliderinit: {
                    currentPage: 0,
                    start: {},
                    end: {},
                    tracking: false,
                    thresholdTime: 500,
                    thresholdDistance: 200,
                    loop: true,
                    autoplay: 3000
                },
                pages: [
                    [
                        {
                            img: 'http://img.qiezilife.com/platform/breakfastRecipe.jpg',
                            name: '早餐食谱'
                        },
                        {
                            img: 'http://img.qiezilife.com/platform/lunchRecipe.jpg',
                            name: '午餐食谱'
                        },
                        {
                            img: 'http://img.qiezilife.com/platform/dinnerRecipe.jpg',
                            name: '晚餐食谱'
                        }
                    ],
                    [
                        {
                            img: 'http://img.qiezilife.com/platform/breakfastRecipe.jpg',
                            name: '早餐食谱'
                        },
                        {
                            img: 'http://img.qiezilife.com/platform/lunchRecipe.jpg',
                            name: '午餐食谱'
                        },
                        {
                            img: 'http://img.qiezilife.com/platform/dinnerRecipe.jpg',
                            name: '晚餐食谱'
                        }
                    ]
                ]
            }
        },
        components: {
            cHead: head,
            foot
        },
        methods: {
            code() {
                this.showCode = true
            },
            close() {
                this.showCode = false
            },
            _initScroll() {
                this.mScroll = new BScroll(this.$refs.mlists, {
                    scrollX: true,
                    click: true
                })
            },
            pre() {
                if (this.sliderinit.currentPage !== 0) {
                    this.sliderinit.currentPage -= 1
                    this.slide()
                } else if (this.sliderinit.loop) {
                    this.sliderinit.currentPage -= 1
                    this.slide(this.sliderinit.currentPage, 'loop')
                } else {
                    this.slide()
                }
            },
            next() {
                if (this.sliderinit.currentPage !== this.pagenums - 1) {
                    this.sliderinit.currentPage += 1
                    console.log('next1' + this.sliderinit.currentPage)
                    this.slide()
                } else if (this.sliderinit.loop) {
                    this.sliderinit.currentPage += 1
                    console.log('next2' + this.sliderinit.currentPage)
                    this.slide(this.sliderinit.currentPage, 'loop')
                } else {
                    console.log('next3' + this.sliderinit.currentPage)
                    this.slide()
                }
            },
            slide(pagenum, type) {
                let that = this
                this.basicdata.animation['animation-ease'] = true
                if (type === 'animationnone') {
                    this.basicdata.animation['animation-ease'] = false
                }
                if (pagenum || pagenum === 0) {
                    this.sliderinit.currentPage = pagenum
                }
                // console.log(this.sliderinit.direction)
                // console.log(this.currentWidth)
                this.basicdata.poswidth = -this.currentWidth + 'px'
                if (type === 'loop') {
                    setTimeout(function(){
                        if (that.sliderinit.currentPage === -1) {
                            that.slide(that.pagenums - 1, 'animationnone')
                        } else {
                            that.slide(0, 'animationnone')
                        }
                    }, 200)
                    return
                }
                this.$emit('slide', this.sliderinit.currentPage)
            },
            clock: function() {
                return {
                    begin: function(that) {
                        if (that.sliderinit.autoplay) {
                            that.setIntervalid = setInterval(function() {
                                that.next()
                                if (that.sliderinit.currentPage === that.pagenums - 1 && !that.sliderinit.loop){
                                    clearInterval(that.setIntervalid)
                                }
                            }, that.sliderinit.autoplay)
                        }
                    },
                    stop: function(that){
                        clearInterval(that.setIntervalid)
                    }
                }
            },
            preventDefault(e){
                e.preventDefault()
            },
            stop() {
                if (this.sliderinit.autoplay){
                    let that = this
                    setTimeout(function() {
                        that.clock().stop(that)
                    }, 100)
                }
            },
            begin() {
                if (this.sliderinit.autoplay){
                    let that = this
                    setTimeout(function() {
                        that.clock().begin(that)
                    }, 100)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this._initScroll()
            })
            let that = this
            that.slide(this.sliderinit.currentPage, 'animationnone')
            that.$on('slideTo', (num) => {
                this.slide(num)
            })
            that.$on('slideNext', () => {
                this.next()
            })
            that.$on('slidePre', () => {
                this.pre()
            })
            that.clock().begin(that)
        },
        computed: {
            styleobj: function () {
                return {'transform': 'translate3D(' + this.basicdata.poswidth + ',' + this.basicdata.posheight + ',0)'}
            },
            pagenums: function() {
                return this.pages.length
            },
            currentWidth: {
                get: function() {
                    let poswidth = 0
                    // let $slider
                    let lastPage = this.sliderinit.currentPage - 1
                    // let srollbar = false
                    console.log(this.sliderinit.currentPage)
                    if (this.sliderinit.loop) {
                        lastPage = this.sliderinit.currentPage
                    }
                    let sli = document.getElementById('slider')
                    let $sliderChildren = sli.getElementsByClassName('cor-list')
                    // console.log($sliderChildren)
                    for (let item in $sliderChildren) {
                        if (item <= lastPage) {
                            poswidth += $sliderChildren[item].offsetWidth
                            poswidth += parseInt($sliderChildren[item].style.marginRight.length ? $sliderChildren[item].style.marginRight : 0)
                            poswidth += parseInt($sliderChildren[item].style.marginLeft.length ? $sliderChildren[item].style.marginLeft : 0)
                        }
                    }
                    return poswidth
                },
                set: function(value){
                    return value
                }
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
@media screen and (min-width: 600px) and (max-width: 800px)
	.wrap-width
		.api
			margin-top 0px
			.api-con
				padding-top 5%
				.api-name
					font-size 24px
				p
					font-size 16px
					padding-top 16px
				a
					font-size 12px
					padding-top 22px
		.correlation
			margin-top 30px
			.corr-content
				margin-top 10px
				margin-bottom 14px
				.cor-lists
					height 270px
					.cor-list
						div
							padding 8px
							img
								height 140px
		.api-detail
			margin 30px 0
			.api-content
				margin 18px 10.9% 0 10.9%
				img
						width 100%
						height 192px
				p
					font-size 14px
@media screen and (min-width: 450px) and (max-width: 600px)
	.wrap-width
		.api
			margin 0 10%
			padding 7% 0 6% 0
			margin-top 0px
			.api-border
				width 86%
				margin-left 7%
			.api-con
				width 100%
				padding-top 7%
				.api-name
					font-size 18px
				p
					font-size 14px
					padding-top 10px
				a
					font-size 12px
					padding-top 14px
		.correlation
			margin-top 30px
			.corr-content
				display none
			.m-content
				display block
		.api-detail
			margin 20px 0
			.api-content
				margin 16px 10.9% 0 10.9%
				p
					font-size 14px
@media screen and (max-width: 450px)
	.wrap-width
		.api
			margin 0 10%
			padding 6% 0 5% 0
			margin-top 0px
			.api-border
				width 84%
				margin-left 8%
			.api-con
				width 100%
				padding-top 7%
				.api-name
					font-size 16px
				p
					font-size 13px
					padding-top 8px
				a
					font-size 11px
					padding-top 13px
		.correlation
			margin-top 27px
			.corr-content
				display none
			.m-content
				display block
		.api-detail
			margin 18px 0
			.api-content
				margin 14px 10.9% 0 10.9%
				p
					font-size 13px
.api
	margin 0 13.6%
	padding 7% 0 3.5% 0
	border-bottom 1px solid #e6e6e6
	margin-top 85px
	.api-border
		width 32%
		border-radius 8px
		border 1px solid #CFCFCF
		padding 6px
		box-sizing border-box
		font-size 0
		.api-img
			background-image url('../assets/img/recipe-img.png')
			background-repeat no-repeat
			background-position center
			background-size cover
			.api-black
				height 0
				padding-top 100%
	.api-con
		width 68%
		text-align center
		padding-top 7%
		line-height 1.3
		.api-name
			display inline-block
			font-size 28px
		p
			font-size 18px
			padding-top 22px
		a
			font-size 12px
			color #0089dc
			text-decoration underline
			padding-top 34px
			display inline-block
.correlation
	margin-top 60px
	.corr-content
		margin-top 30px
		margin-bottom 20px
		position relative
		.pre, .next
			font-size 40px
			color #e2e2e2
			position absolute
			display inline-block
			line-height 1
			top 50%
			margin-top -20px
		.pre
			left 0px
		.next
			right 0px
		.cor-lists
			margin 0 6%
			height 300px
			overflow hidden
			.slider-wrapper
				box-sizing content-box
				display flex
				height 100%
				position relative
				transition-property transform
				width 100%
				z-index 1
				&.animation-ease
					transition: transform 500ms cubic-bezier(.165, .84, .44, 1)
			.cor-list
				font-size 0
				align-items center
				display flex
				justify-content center
				text-align center
				flex-shrink 0
				height 100%
				width 100%
				div
					display inline-block
					box-shadow 0px 1px 14px 4px rgba(119,119,119,0.1)
					margin 0 1%
					padding 12px
					border-radius 8px
					box-sizing border-box
					width 30.5%
					&:last-child
						margin-right 0px
					img
						width 100%
						height 192px
					span
						font-size 18px
						color #2e2e2e
						line-height 1
						margin-top 10px
						display block
						text-align center
	.m-content
		display none
		width 100%
		overflow hidden
		.m-lists
			padding 20px 0px 15px 0px
			width 880px
			.m-list
				float left
				width 210px
				padding 5px
				box-sizing border-box
				box-shadow 0px 1px 15px 4px rgba(119,119,119,0.1)
				margin 5px
				img
					width 200px
					height 135px
				span
					display block
					text-align center
					font-size 15px
					color #2e2e2e
					line-height 1
					margin-top 6px
.api-detail
	margin 60px 0
	.api-content
		margin 24px 10.9% 0 10.9%
		p
			line-height 1.7
			font-size 16px
			color #777
			word-break break-all
.fade
	.code-wrap
		position fixed
		width 330px
		height 330px
		left 50%
		top 50%
		margin-left -(@width/2)
		margin-top -(@height/2)
		.close
			color #eee
			font-size 34px
			position absolute
			top -34px
			right -34px
</style>
